<template>
  <h1>{{ msg }}</h1>
  <h2 style="color: red">{{ a }}</h2>
  <h2 style="color: red">{{ b }}</h2>
  <div v-for="(item,index) in arr" :key="index">
    <span style="color: aquamarine">{{ item }}</span>
  </div>
  <button @click="f1">按钮1</button>
  <button @click="f2">按钮2</button>
  <div style="color: blue">
    <h2>ref</h2>
    产品:{{ products }},姓名:{{ name }},
    <div v-for="(item,index) in arr1" :key="index">
      地区:<span>{{ item.field1 }}</span>
    </div>
    <button @click="f3">改变</button>
  </div>
  <el-button type="primary">Primary</el-button>
  <div style="color: blue">
    <h2>reactive</h2>
    姓名1:{{ obj1.name }},年龄1:{{ obj1.age }},地区:{{ obj1.area }},数据:{{ obj1.a.b.arr2[0] }}
    <button @click="f4">改变1</button>
  </div>
  <div style="color: blue">
    <h2>toRef</h2>
    姓名1:{{ obj4.name }},年龄1:{{ obj4.age }}
    <el-button type="primary" @click="f5">改变</el-button>
  </div>
  <div style="color: blue">
    <h2>toRefs</h2>
    姓名1:{{ name11 }},年龄1:{{ age11 }},地区:{{ obj71.name71 }}
    <el-button type="danger">改变</el-button>
  </div>
  <div style="color: blue">
    <h2>computed</h2>
    1年龄:<input type="number" name="" id="" v-model="mayun"> <br>
    2年龄:<input type="number" name="" id="" v-model="huateng"> <br>
    年龄总和:<input type="number" name="" id="" v-model="sum"> <br>
  </div>
  <div style="color: blue">
    <h2>watch</h2>
    <h3>{{ num1 }}</h3>
    <h3>{{ num2 }}</h3>
    <h3>{{ obj9.age101.num9 }}</h3>
    <el-button type="info" @click="num1++">num1++</el-button>
    <el-button type="warning" @click="num2+=2" round>num2+=2</el-button>
    <el-button type="primary" @click="obj9.age101.num9++" plain>obj9.age101.num9++</el-button>
  </div>
</template>

<script>
import {ref, reactive, toRef, toRefs, computed, watch} from "vue";

export default {
  name: "StudyVue",
  props: {
    msg: String
  },
  setup() { //起服务后，这个函数会被自动执行
    //watch
    const num1 = ref(0);
    const num2 = ref(0);
    const obj9 = reactive({
      name3: 'hh',
      age101: {
        num9: 88
      }
    });
    watch([num1, num2], (value, oldValue) => {//监听变化
      console.log(value, oldValue);
    });
    watch(obj9, (value, oldValue) => {//这里监听不到旧数据
      console.log(value, oldValue);
    });
    watch(() =>
            obj9.age101.num9
        , (value, oldValue) => {//这样可以监听到新旧数据
          console.log(value, oldValue);
        }, {immediate: true});//options参数如此,可在页面加载后触发第二个参数WatchCallback执行
    //computed
    const mayun = '';
    const huateng = '';
    const reactive8 = reactive({mayun, huateng});
    const sum = computed(() => reactive8.huateng + reactive8.mayun);

    //toRefs
    const obj7 = {
      name11: '赣州',
      age11: 7,
      obj71: {
        name71: '成都'
      }
    };
    const reactive1 = reactive(obj7);

    let a = 'varA1';
    {
      const a = 'constA'; //块级作用域，常量
      console.log(a);
      let b = 'letB1'; //块级作用域
      b = 'letB2'
      console.log(b);
    }
    a = 'varA2';
    let b = 'varB1';
    console.log(a);
    let arr = ['1', '2', '3'];

    function f1() {
      console.log("f1被触发");
    }

    const f2 = () => {
      console.log("f2被触发");
    }
    const obj2 = {
      taobao: '淘宝',
      tianmao: '天猫'
    };
    const products = ref(obj2);
    const name1 = "陈亮";
    const name = ref(name1);//使数据可响应式变化,而不用刷新页面

    function f3() {
      products.value.taobao = '淘宝1';//会修改到源数据
      name.value = '陈亮1';//不会修改到源数据
      arr1.value[0].field1 = '中国1';
    }

    let arr1 = ref([{field1: '中国'}]);
    let field1 = reactive('1'); //reactive作用于基本类型数据会报错,提示[value cannot be made reactive]
    let obj1 = reactive({//使数据可响应式变化,而不用刷新页面
      age: 1,
      name: '哈哈',
      area: '抚州',
      a: {
        b: {
          arr2: ['深层级数据'] //reactive可作用于深层级数据
        }
      }
    });

    function f4() {
      obj1.name = '哈哈1';//相比ref,这里不需要.value
      obj1.a.b.arr2[0] = '深层级数据1';
    }

    const obj4 = {
      name: 'jj',
      age: 99
    };
    const toRef1 = toRef(obj4, 'name');

    function f5() {
      toRef1.value = 'jj1';//修改了源数据obj4,但视图层内容不会变化
    }

    return { //暴露给模板
      a, b, arr, f1, f2, obj2, f3, name, arr1, obj1, field1, f4, obj4, f5, products,
      ...toRefs(reactive1),//(三个点为扩展符号),这样使用返回出去后,可直接引用对象中的属性,而不用对象.属性;toRefs的入参需要是响应式对象
      ...toRefs(reactive8), sum, num1, num2, obj9
    };
  }
}
</script>

<style scoped>

</style>